<template>
  <view class = "container_position">
    <view class="box">盒子1</view>
    <view class="box">盒子2</view>
    <view class="box">盒子3</view>
    <view class="box">盒子4</view>
    <view class="box">盒子5</view>
    <view class="box">盒子6</view>
  </view>
</template>

<script setup>

</script>

<style scoped lang="scss">


/*flex 布局*/
.container_flex{
  gap: 10rpx; /* 设置项目之间的间距 gap: 10px 20px; /* 行间距 10px，列间距 20px */
  display: flex;
  flex-direction: row; /*默认 row 行 column：列*/
  flex-wrap: wrap; /*nowrap默认不换行  wrap:换行*/
  /*flex-flow: row nowrap flex-flow 是 flex-direction 与 flex-wrap 的缩写形式。*/
 /* justify-content: flex-start; *//*center flex项目在 主轴 上的对齐方式。*/
 /* align-items:center; *//*定义项目在 交叉轴 上对齐方式*/
 /* align-content: flex-start;*//*总结就是单行找 align-items 多行找 align-content。*/
}
.container_position{
  position: relative;  /*static：静态定位，是默认值，当代码使用top,left.等，无效
                        absolute：绝对定位，相对于父元素进行定位，元素通过top,right,left等进行定位
                       fixed：固定定位，相对于浏览器进行定位 相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
                       这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。(一般做一些弹窗) 它如果搭配top、bottom、left、right这四个属性一起使用，
                       表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
                       relative：相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
                       它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离*/
  background-color: #ffffff;
  top: 100rpx;
  left: 100rpx;
  bottom: 100rpx;
  border: 2rpx solid #000000;

}



.box{
  height: 150rpx;
  width: 150rpx;
  background-color: #4fb682;
  border: 2rpx solid #000000;
}

</style>